<template>
  <el-dialog :title="!editTab ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
    @close="clearDataList()" width="800px" top="8vh">
    <el-container>
      <el-main style="max-height:60vh">
        <div>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="140px">

            <el-row v-for="(item,index) in dataForm.dataList" :key="index" class="groupBox">
              <el-col :span="24">
                <el-form-item label="等次名称" :prop="'dataList['+index+'].dcName'" :rules="[
                 { required: true, message: '等次名称不能为空', trigger: 'blur' },
                 { min:1, max:200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
                 ]">
                  <el-input v-model="item.dcName" placeholder="等次名称" style="width: 90%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="等次分值" :prop="'dataList['+index+'].dcFz'" :rules="[
                 { required: true, message: '等次分值不能为空', trigger: 'blur' },
                 {pattern: /^(0|[1-9]\d?|100)$/, message: '范围在0-100', trigger: 'blur'}]">
                  <el-input-number v-model="item.dcFz" label="等次分值"></el-input-number>
                </el-form-item>
              </el-col>

              <!--              <el-row>-->
              <!--                <el-col :span="12">-->
              <!--                  <el-form-item label="等次结果起" :prop="'dataList['+index+'].dcJgq'" :rules="[-->
              <!--                 { required: true, message: '等次结果起不能为空', trigger: 'blur' }]">-->
              <!--                    <el-input-number v-model="item.dcJgq" :min="0" label="等次结果起"></el-input-number>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <!--                <el-col :span="12">-->
              <!--                  <el-form-item label="等次结果止" :prop="'dataList['+index+'].dcJgz'" :rules="[-->
              <!--                 { required: true, message: '等次结果止不能为空', trigger: 'blur' }]">-->
              <!--                    <el-input-number v-model="item.dcJgz" :min="0"  label="等次结果止"></el-input-number>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <!--              </el-row>-->

              <el-col :span="12" :xs="24">
                <el-form-item label="等次排序" :prop="'dataList['+index+'].dcSort'" :rules="[
                 { required: true, message: '等次排序不能为空', trigger: 'blur' }]">
                  <div class="flex justifyContentSpaceBetween alignItemsCenter">
                    <el-input-number v-model="item.dcSort" :min="0" :max="10000" label="等次排序"></el-input-number>
                    <div v-if="!editTab">
                      <el-button @click="removeItem(index)" v-if="dataForm.dataList.length>1" icon="el-icon-minus">
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <!-- :rules="[
                 { required: true, message: '等次分值不能为空', trigger: 'blur' },
                 {pattern: /^(0|[1-9]\d?|100)$/, message: '范围在0-100', trigger: 'blur'}]" -->
                <el-form-item label="占比(%)" :prop="'dataList['+index+'].dcZb'" >
                  <el-input-number v-model="item.dcZb" label="占比(%)"></el-input-number>
                </el-form-item>
              </el-col>
              <div v-if="!editTab">
                <el-button @click="addItem()" v-if="index==dataForm.dataList.length-1" style="float: right;"
                  icon="el-icon-plus"></el-button>
              </div>
            </el-row>
          </el-form>
        </div>

      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button type="primary" plain @click="closeFormDjmx">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    getObj,
    addObj,
    putObj,
    addObjList
  } from '@/api/ceping/cepingdjmxb'


  export default {
    data() {
      return {
        visible: false,
        canSubmit: false,
        //父类Id
        djId: '',
        //子类Id
        cId: '',
        //是否修改状态
        editTab: false,
        dataForm: {
          dataList: [{

            djId: '',
            dcName: '',
            dcFz: '',
            dcJgq: '',
            dcJgz: '',
            dcSort: '',

            createTime: '',
            editTime: '',
            createDeptId: '',
            createDeptName: '',
            createUserId: '',
            createUserName: '',
            editDeptId: '',
            editDeptName: '',
            editUserId: '',
            editUserName: '',
            dataState: '',
            tenantId: ''
          }],
        },

        dataRule: {
          djId: [{
            required: true,
            message: '所属等次不能为空',
            trigger: 'blur'
          }],
          dcName: [{
              required: true,
              message: '排名名称不能为空',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 30,
              message: '长度在 2 到 30 个字符',
              trigger: 'blur'
            }
          ],
          dcFz: [{
              required: true,
              message: '等次分值不能为空',
              trigger: 'blur'
            },
            // { min:1, max:10, message: '长度在 1 到 10 位', trigger: 'blur' }
          ],
          dcJgq: [{
              required: true,
              message: '等次结果起不能为空',
              trigger: 'blur'
            },
            // { min:1, max:10, message: '长度在 1 到 10 位', trigger: 'blur' }
          ],
          dcJgz: [{
              required: true,
              message: '等次结果止不能为空',
              trigger: 'blur'
            },
            // { min:1, max:10, message: '长度在 1 到 10 位', trigger: 'blur' }
          ],
          dcSort: [{
              required: true,
              message: '等次排序不能为空',
              trigger: 'blur'
            },
            // { min:0, max:10, message: '长度在 1 到 10 位11', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init(ruleId, id) {
        // this.dataForm.id = id || 0;
        this.djId = ruleId;
        this.cId = id || 0;

        this.visible = true;
        this.canSubmit = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.cId) {
            this.editTab = true;
            this.dataForm.dataList = [];
            getObj(this.cId).then(response => {
              this.dataForm.dataList.push(response.data.data);
            })
          } else {
            this.editTab = false;
            this.dataForm = {
              dataList: [{
                djId: ruleId,
                dcName: '',
                dcFz: '',
                dcJgq: '',
                dcJgz: '',
                dcSort: ''
              }]
            }
          }
        })
      },
      //添加数据项
      addItem() {
        this.dataForm.dataList.push({

          djId: this.djId,
          dcName: '',
          dcFz: '',
          dcJgq: '',
          dcJgz: '',
          dcSort: '',

          createTime: '',
          editTime: '',
          createDeptId: '',
          createDeptName: '',
          createUserId: '',
          createUserName: '',
          editDeptId: '',
          editDeptName: '',
          editUserId: '',
          editUserName: '',
          dataState: '',
          tenantId: ''
        });
      },
      //移除数据项
      removeItem(index) {
        this.dataForm.dataList.splice(index, 1);
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.canSubmit = false;
            if (this.editTab) {
              putObj(this.dataForm.dataList[0]).then(data => {
                this.$notify.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
                this.$emit('getSubList')
              }).catch(() => {
                this.canSubmit = true;
              });
            } else {
              addObjList(this.dataForm.dataList).then(data => {
                this.$notify.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
                this.$emit('getSubList')
              }).catch(() => {
                this.canSubmit = true;
              });
            }
          }
        })
      },
      //关闭窗体
      closeFormDjmx() {
        this.visible = false;
        this.editTab = false;
        this.clearDataList();
      }

      ,
      clearDataList() {
        this.dataForm = {
          dataList: []
        };
        // this.dataForm.dataList.push({
        //   djName: '',
        //   yyFw: ''
        // });
      }
    }
  }

</script>

<style scoped>
</style>
